
<template>
<!-- 打卡记录 -->
  <router-link to="./setuser">&gt;&gt;返回列表</router-link>
  <!-- 用户搜索 -->
  <div class="usersearch">
    <div class="usele">
      <span>用户ID：{{id}}</span>
      <span>用户手机：{{phone}}</span>
    </div>
    <div class="useri">
      年份：
      <input v-model="year" type="number" />
      月份：
      <input v-model="month" type="number" />

      <button @click="search">查询</button>
    </div>
  </div>
  <!-- 用户渲染 -->
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" prop="usid" label="用户ID:" />
      <el-table-column align="center" prop="usname" label="用户名称:" />
      <el-table-column align="center" prop="usphone" label="用户手机号" />
      <el-table-column align="center" prop="date" label="用户注册时间:" />
      <el-table-column align="center" prop="balance" label="账户余额:" />
      <el-table-column align="center" prop="duration" label="累计学习时长:" />
      <el-table-column align="center" prop="Exchange" label="可用兑换时长:" />
    </el-table>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { ref } from "vue";
// 年
const year = ref("");
// 月
const month = ref("");

const tableData = [
  {
    usid: "1",
    usname: "张三",
    usphone: "15896735689",
    date: "2016-05-03",
    balance: "20",
    duration: "18小时",
    Exchange: "20小时"
  },
  {
    usid: "2",
    usname: "张过后",
    usphone: "15896735689",
    date: "2026-05-03",
    balance: "205",
    duration: "184小时",
    Exchange: "23小时"
  },
  {
    usid: "3",
    usname: "张风格",
    usphone: "15896735689",
    date: "2018-05-03",
    balance: "240",
    duration: "188小时",
    Exchange: "201小时"
  },
  {
    usid: "4",
    usname: "张第三方",
    usphone: "15896735689",
    date: "2016-08-03",
    balance: "20",
    duration: "18小时",
    Exchange: "24小时"
  }
];
// 搜索
const search = () => {
  console.log(year.value);
  console.log(month.value);
};
const route = useRoute();
const id = route.query.user_id;
const phone = route.query.user_iphone;
</script>

<style lang='scss' scoped>
a {
  text-decoration: none;
  font-size: 12px;
  color: #51c5f8;
}
.usersearch {
  height: 50px;
  line-height: 50px;
  display: flex;
  background-color: #d7d7d7;
  padding: 0 20px;
  margin-top: 10px;
  .usele,
  .useri {
    flex: 1;
    span {
      display: inline-block;
      width: 200px;
    }
    input {
      outline: none;
    }
    button {
      width: 80px;
      height: 30px;
      margin-left: 20px;
      background-color: #555555;
      color: #fff;
      border: 0 solid #000;
      cursor: pointer;
    }
  }
}
</style>